<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备管理</title>
    <link type="text/css" rel="stylesheet" href="../css/home.css">
</head>
<body>
    <div id="title" class="title">
            <img id="title_logo" src="../material/logo.png" alt="">
            <p id="title_company" class="company">公司名</p>
            <p id="title_time" class="time">T>2024/10/20 15:36:02</p>
    </div>
    <div class="top_line"></div>
    <img src="../material/setting.png" class="button_setting" alt="" onclick="fun.openSetting('pop_setting')">
    <div class="center_left">
        <div class="window_head">
            <p class="name">监控警报</p>
        </div>
        <div class="equipment">
            <div id="center_left_equipment_img_bg" class="img">
                <img id="center_left_equipment_img" src="../material/equipment_normal.png" alt="">
            </div>
            <p id="center_left_equipment_name" class="name">机器名称</p>
            <div id="center_left_equipment_list" class="list">
                <div class="list_item">
                    <img src="../material/equipment_normal.png" alt="">
                    <p>机器名称</p>
                </div>
                <div class="list_item">
                    <img src="../material/equipment_normal.png" alt="">
                    <p>机器名称</p>
                </div>
                <div class="list_item">
                    <img src="../material/equipment_normal.png" alt="">
                    <p>机器名称</p>
                </div>
                <div class="list_item">
                    <img src="../material/equipment_normal.png" alt="">
                    <p>机器名称</p>
                </div>
                <div class="list_item">
                    <img src="../material/equipment_normal.png" alt="">
                    <p>机器名称</p>
                </div>
                <div class="list_item">
                    <img src="../material/equipment_normal.png" alt="">
                    <p>机器名称</p>
                </div>
            </div>
        </div>
    </div>
    <div class="center_right">
        <p id="center_right_equipment_name" class="name">机器名</p>
        <p id="center_right_equipment_program" class="program">程序名</p>
        <div id="center_right_img_bg" class="img">
            <img id="center_right_img" src="../material/equipment_normal.png" alt="">
        </div>
        <canvas id="canvas_one" class="canvas"></canvas>
        <div class="data">
            <p class="child_name">本月总开机时间</p>
            <p id="center_right_starting_time" class="child_data">720.56h</p>
            <p class="child_name">本月总加工时间</p>
            <p id="center_right_run_time" class="child_data">546.21h</p>
            <p class="child_name">本月加工占比</p>
            <p id="center_right_run_pro" class="child_data">56.23%</p>
            <p class="child_name">速度</p>
            <p id="center_right_run_speed" class="child_data">22</p>
        </div>
    </div>
    <div class="bottom">
        <div class="window_head">
            <p class="name">本月数据</p>
        </div>
        <div class="tip">
            <div class="tip_blue"></div>
            <p class="tip_name">开机时间</p>
            <div class="tip_green"></div>
            <p id="bottom_tip_name" class="tip_name">加工时间</p>
            <p id="bottom_tip_run_pro" class="tip_total_data">89.69%</p>
            <p class="tip_total">本月加工占比:</p>
            <p id="bottom_tip_run_process" class="tip_total_data">7425.27h</p>
            <p class="tip_total">本月总加工时间:</p>
            <p id="bottom_tip_starting_time" class="tip_total_data">8956.45h</p>
            <p class="tip_total">本月总开机时间:</p>
        </div>
        <canvas id="canvas_all" class="canvas"></canvas>
    </div>
    <div class="foot">
        <div class="foot_line"></div>
        <div class="foot_box"></div>
        <p id="foot_name" class="name">成都简约至上计算机技术有限责任公司</p>
        <img id="foot_logo" src="../material/logo.png" alt="">
        <p id="title_ip" class="ip">IP>192.168.0.1</p>
    </div>
    <div id="pop_setting" class="pop">
        <div class="box">
            <div class="bg">设置</div>
            <img src="../material/close.png" class="close" onclick="fun.closeSetting('pop_setting')" alt="">
            <div class="center">
                <div class="vbox">
                    <p class="head">设备管理</p>
                    <button class="head_button" onclick="fun.openSetting('pop_update_equipment')">添加</button>
                    <div id="setting_equipment_list" class="list">
                        <div class="item">
                            <img src="../material/equipment_normal.png" alt="">
                            <p class="name">设备名</p>
                            <p class="content">192.168.0.1:5602</p>
                            <button class="sub">删除</button>
                            <button class="add">编辑</button>
                        </div>
                    </div>
                </div>
                <div class="vbox">
                    <p class="head">机型管理</p>
                    <button class="head_button" onclick="fun.openSetting('pop_update_model')">添加</button>
                    <div id="setting_model_list" class="list">
                        <div class="item">
                            <img src="../material/equipment_normal.png" alt="">
                            <p class="name">机型名</p>
                            <p class="content">2024/10/28</p>
                            <button class="sub">删除</button>
                            <button class="add">编辑</button>
                        </div>
                    </div>
                </div>
                <div class="vbox">
                    <p class="head">信息设置</p>
                    <div class="list2">
                        <img id="setting_logo" src="../material/logo.png" alt="">
                        <button onclick="fun.updateCompanyLogo()">更换LOGO</button>
                        <label>
                            <input id="setting_company" placeholder="公司名称">
                        </label>
                        <button onclick="fun.updateCompanyName()">更改公司名称</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pop_update_equipment" class="pop">
        <div class="box">
            <div class="bg">编辑设备信息</div>
            <img src="../material/close.png" class="close" onclick="fun.closeSetting('pop_update_equipment')" alt="">
            <div class="center">
                <div class="row">
                    <div>
                        <img id="pop_update_equipment_update_img" src="../material/equipment_normal.png" alt="">
                        <button id="pop_update_equipment_update_image" style="margin-top: 14.5vh" onclick="fun.changeEquipmentImage('pop_update_equipment_update_img')">更换图片</button>
                    </div>
                    <div>
                        <p>设备名称：</p>
                        <label><input id="pop_update_equipment_update_name" placeholder="输入设备名" style="width: 20vw"></label>
                    </div>
                    <div>
                        <p>机型名称：</p>
                        <label><input id="pop_update_equipment_update_model" placeholder="输入机型" style="width: 10vw;"></label>
                        <p>选择模板：</p>
                        <label><select id="pop_update_equipment_update_models" onchange="fun.selectModel()"><option>无</option></select></label>
                    </div>
                    <div>
                        <p id="pop_update_equipment_update_address_p">设备地址：</p>
                        <label><select id="pop_update_equipment_method"><option>GET</option><option>POST</option></select></label>
                        <label><select id="pop_update_equipment_protocol"><option>https://</option><option>http://</option></select></label>
                        <label><input id="pop_update_equipment_ip_path" class="ip" placeholder="196.168.0.0:12345/path" style="width:13vw;"></label>
                    </div>
                    <div style="border-style: solid;border-color: #fff2;border-width: 1px 0 0 0;padding: 1vh 0 0 0">
                        <p>报警字段设置：</p>
                        <button class="button" onclick="fun.addKeyValue('pop_update_equipment_update_alarm_kv_list')">添加</button>
                    </div>
                    <div id="pop_update_equipment_update_alarm_kv_list" style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input placeholder="字段名"></label>
                            <p>=</p>
                            <label><select><option>无值</option><option>有值</option></select></label>
                            <label><select><option>或者</option><option>并且</option></select></label>
                        </div>
                    </div>
                    <div>
                        <p>加工字段设置：</p>
                        <button class="button" onclick="fun.addKeyValue('pop_update_equipment_update_process_kv_list')">添加</button>
                    </div>
                    <div id="pop_update_equipment_update_process_kv_list" style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input placeholder="字段名"></label>
                            <p>=</p>
                            <label><select><option>无值</option><option>有值</option></select></label>
                            <label><select><option>或者</option><option>并且</option></select></label>
                        </div>
                    </div>
                    <div>
                        <p>待机字段设置：</p>
                        <button class="button" onclick="fun.addKeyValue('pop_update_equipment_update_await_kv_list')">添加</button>
                    </div>
                    <div id="pop_update_equipment_update_await_kv_list" style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input placeholder="字段名"></label>
                            <p>=</p>
                            <label><select><option>无值</option><option>有值</option></select></label>
                            <label><select><option>或者</option><option>并且</option></select></label>
                        </div>
                    </div>
                    <div>
                        <p>速度字段设置：</p>
                    </div>
                    <div style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input id="pop_update_equipment_update_speed_kv" placeholder="字段名"></label>
                        </div>
                    </div>
                    <div>
                        <p>程序名字段设置：</p>
                    </div>
                    <div style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input id="pop_update_equipment_update_program_kv" placeholder="字段名"></label>
                        </div>
                    </div>
                    <div>
                        <button onclick="http.updateEquipment(1)">保存设备</button>
                        <button onclick="http.updateEquipment(0)">保存机型模板</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pop_update_model" class="pop">
        <div class="box">
            <div class="bg">编辑机型信息</div>
            <img src="../material/close.png" class="close" onclick="fun.closeSetting('pop_update_model')" alt="">
            <div class="center">
                <div class="row">
                    <div>
                        <img id="pop_update_template_update_img" src="../material/equipment_normal.png" alt="">
                        <button id="pop_update_template_update_image" style="margin-top: 14.5vh" onclick="fun.changeEquipmentImage('pop_update_template_update_img')">更换图片</button>
                    </div>
                    <div>
                        <p>机型名称：</p>
                        <label><input id="pop_update_template_update_model" placeholder="输入机型" style="width: 10vw;"></label>
                    </div>
                    <div>
                        <p>设备地址：</p>
                        <label><select id="pop_update_model_method"><option>GET</option><option>POST</option></select></label>
                        <label><select id="pop_update_model_protocol"><option>https://</option><option>http://</option></select></label>
                    </div>
                    <div style="border-style: solid;border-color: #fff2;border-width: 1px 0 0 0;padding: 1vh 0 0 0">
                        <p>报警字段设置：</p>
                        <button class="button">添加</button>
                    </div>
                    <div id="pop_update_template_update_alarm_list" style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input placeholder="字段名"></label>
                            <p>=</p>
                            <label><select><option>有值</option><option>无值</option></select></label>
                            <label><select><option>并且</option><option>或者</option></select></label>
                            <button class="button">删除</button>
                        </div>
                    </div>
                    <div>
                        <p>加工字段设置：</p>
                        <button class="button">添加</button>
                    </div>
                    <div id="pop_update_template_update_process_list" style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input placeholder="字段名"></label>
                            <p>=</p>
                            <label><select><option>有值</option><option>无值</option></select></label>
                            <label><select><option>并且</option><option>或者</option></select></label>
                            <button class="button">删除</button>
                        </div>
                    </div>
                    <div>
                        <p>待机字段设置：</p>
                        <button class="button">添加</button>
                    </div>
                    <div id="pop_update_template_update_await_list" style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input placeholder="字段名"></label>
                            <p>=</p>
                            <label><select><option>有值</option><option>无值</option></select></label>
                            <label><select><option>并且</option><option>或者</option></select></label>
                            <button class="button">删除</button>
                        </div>
                    </div>
                    <div>
                        <p>速度字段设置：</p>
                    </div>
                    <div style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input id="pop_update_template_update_speed" placeholder="字段名"></label>
                        </div>
                    </div>
                    <div>
                        <p>程序名字段设置：</p>
                    </div>
                    <div style="border-style: solid;border-color: #fff2;border-width: 0 0 1px 0;padding: 0 0 1vh 0">
                        <div>
                            <label><input id="pop_update_template_update_program" placeholder="字段名"></label>
                        </div>
                    </div>
                    <div>
                        <button onclick="http.updateModel()">保存机型模板</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pop_delete" class="pop">
        <div class="delete_box">
            <p class="head">删除提示</p>
            <p id="pop_delete_content" class="content">确认要删除***机型模板吗？</p>
            <div>
                <button id="pop_delete_affirm" class="affirm">确认</button>
                <button class="delete" onclick="fun.closeDeletePop(this)">取消</button>
            </div>
        </div>
    </div>
</body>
<script src="../js/config.js"></script>
<script src="../js/css_setting.js"></script>
<script src="../js/home.js"></script>
</html>